<template>
    <div class="set-score-dialog">
        <el-dialog
            title="分数设置"
            label-position="left"
            :close-on-click-modal="false"
            :visible.sync="dialogFormVisible"
            ref="form"
            width="490px"
            @close="close"
        >
            <div class="dialog-body">
                <div class="item-input">
                    <span class="label">{{ title }}</span>
                    <div class="input-col">
                        <el-input-number
                            v-model="fullMark"
                            controls-position="right"
                            :min="0"
                            :max="100"
                        >
                        </el-input-number>
                    </div>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                    round
                    :loading="loading"
                    size="small"
                    class="btn-hover"
                    @click="sub"
                >
                    保存
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { setClassPerFullMark, setReviewFullMark } from '../../../../api/myCourse';
export default {
    data() {
        return {
            loading: false,
            dialogFormVisible: false,
            title: '',
            fullMark: '',
            classId: null,
            courseId: null,
            type: null,
            chapterId: null,
            status: null
        };
    },
    methods: {
        init(type, data) {
            const { fullMark, courseId, classId, status, chapterId } = data;
            this.fullMark = fullMark;
            this.courseId = courseId;
            this.classId = classId;
            this.type = type;
            this.status = status || null;
            this.chapterId = chapterId || null;
            if (type == 1) {
                this.title = '课堂表现满分分数：';
            }

            if (type == 2) {
                this.title = '随堂练习满分分数：';
            }

            if (type == 3) {
                this.title = '实验报告满分分数：';
            }

            this.dialogFormVisible = true;
        },
        close() {
            console.log(123);
        },
        sub() {
            if (this.type == 1) {
                this.loading = true;
                setClassPerFullMark({
                    busiType: "string",
                    classIdList: [this.classId],
                    courseId: this.courseId,
                    fullMark: this.fullMark
                }, this.courseId, this.classId).then((res) => {
                    this.loading = false;
                    this.$message.success('设置成功!');
                    this.dialogFormVisible = false;
                }).catch(() => {
                    this.loading = false;
                });
            }

            if (this.type == 2 || this.type == 3) {
                this.loading = true;
                setReviewFullMark({
                    classId: this.classId,
                    courseId: this.courseId,
                    score: this.fullMark,
                    chapterId: this.chapterId,
                    type: this.status,

                }, this.courseId).then((res) => {
                    this.loading = false;
                    this.$message.success('设置成功!');
                    this.dialogFormVisible = false;
                }).catch(() => {
                    this.loading = false;
                });
            }
        }
    }
}
</script>

<style lang="scss">
.set-score-dialog {
    .el-dialog__body {
        padding: 39px 50px 0;
    }

    .el-input__inner {
        width: 100%;
    }

    .el-input-number {
        width: 80%;
        line-height: 32px;
        .el-input__inner {
            text-align: left;
        }
    }

    .el-input-number__increase,.el-input-number__decrease {
        line-height: 15px !important;
    }

    .dialog-footer {
        padding-top: 40px;
        text-align: center;
        .el-button--small, .el-button--small.is-round {
            padding: 9px 30px;
        }

        .el-button {
            font-size: 14px;
            border-color: #1277EB;
            color: #1277EB;
        }
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff !important;
    }
}

</style>

<style lang="scss" scoped>
.set-score-dialog {
    .dialog-body {
        .item-input {
            display: flex;
            align-items: center;
            .label {
                width: 130px;
                color: #727272;
                font-size: 14px;
            }
            .input-col {
                flex: 1;
            }
        }

        .item-input~.item-input {
            margin-top: 20px;
        }
    }
}
</style>
